<template>
  <el-collapse class="placeInput absolute z-10" v-model="searchKeywordActive">
    <el-collapse-item name="1" disabled>
      <template #title>
        <el-input clearable
                  placeholder="搜索目标地点"
                  class="input-with-select"
                  @focus="placeInputFocus"
                  @blur="placeInputBlur"
                  v-model="placeInputValue"
                  @input="placeInputChange"
        >
          <template #append>
            <el-button :icon="Search" @click="siteSearch()"/>
          </template>
        </el-input>
      </template>
      <div class="search-list overflow-y-auto max-h-[500px] font-size-[14px]" v-if="placeInputValue">
        <div v-for="(item, index) in searchPlaceList" :key="index"
             class="cursor-pointer flex flex-items-center item-list">
          <el-icon>
            <LocationInformation/>
          </el-icon>
          <div class="ml-[5px]">{{ item.name }}</div>
        </div>
      </div>
      <div v-else>
        <div style="color: #8d8d8d; margin-bottom: 5px">
          搜索附近
        </div>
        <div class="searchArea flex flex-items-center w-[100%] flex-justify-around">

          <div class="areaType flex  flex-items-center w-[100%] flex-justify-around "
               v-for="(item,index) in areaTypeData" :key="index">
            <div class="w-[100%] cursor-pointer py-12px flex flex-items-center flex-col ">
              <el-icon :size="30">
                <component :is="item.icon"/>
              </el-icon>
              <div class="font-size-[16px]">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-collapse-item>
  </el-collapse>
  <el-card class="placeCard absolute top-[80px] right-[20px] w-[350px] z-8" v-if="isShowPlaceList">
    <template #header>
      <div class="card-header  ">
        <div class="boxType ">地点查询</div>
        <el-button link :icon="Close"/>
      </div>
    </template>
    <div class="bottomGdbox flex-1 max-h-[350px] overflow-y-auto px-5rpx" v-if="placeList && placeList.length > 0">
      <div v-for="(item,index) in placeList" :key="index"
           class="placeInfo cursor-pointer border-rd-10px flex flex-items-center p-10px mt-10px">
        <div>
          <div>{{ index + 1 + '. ' + item.name }}</div>
          <div v-if="item.address">地址：{{ item.address }}</div>
          <div v-if="item.tel && item.tel.length > 0">电话：{{ item.tel }}</div>
          <div class="locationToNear">
            <el-button
              type="info"
              plain
              round
              size="small"
              :icon="Search"
              @click.stop="itemNearPlace(item)"
            >
              周边查询
            </el-button>
          </div>
        </div>
        <div v-if="item.photos && item.photos.length > 0">
          <img :src="item.photos[0].url" alt=""/>
        </div>
        <div v-else class="noImgClass">
          <el-icon>
            <Picture/>
          </el-icon>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据"/>
    <el-pagination
      v-if="placeList && placeList.length > 0"
      small
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      layout="prev, pager, next"
      :total="total"
      @current-change="placeSearchBtn"
    />
  </el-card>
  <el-card class="placeCard absolute top-[80px] right-[20px] w-[350px] z-8" v-if="isShowPanel">
    <template #header>
      <div class="card-header">
        <div class="boxType">周边查询</div>
        <el-button link :icon="Close"/>
      </div>
    </template>
    <div class="placeType font-size-14px fw-bold flex flex-items-center w-100% mb-12px flex-justify-around">
      <div
        :class="placeTypeNumber == 1 ? 'active' : ''"
        @click="choosePlaceType(1)"
      >
        <el-icon>
          <Food/>
        </el-icon>
        <div>美食</div>
      </div>
      <div class="centerlog">|</div>
      <div
        :class="placeTypeNumber == 2 ? 'active' : ''"
        @click="choosePlaceType(2)"
      >
        <el-icon>
          <OfficeBuilding/>
        </el-icon>
        <div>超市</div>
      </div>
      <div class="centerlog">|</div>
      <div
        :class="placeTypeNumber == 3 ? 'active' : ''"
        @click="choosePlaceType(3)"
      >
        <el-icon>
          <Guide/>
        </el-icon>
        <div>停车场</div>
      </div>
      <div class="centerlog">|</div>
      <div
        :class="placeTypeNumber == 4 ? 'active' : ''"
        @click="choosePlaceType(4)"
      >
        <el-icon>
          <School/>
        </el-icon>
        <div>卫生间</div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {
  Close,
  Search,
  Food,
  Guide,
  School,
  OfficeBuilding,
  Picture,
} from '@element-plus/icons-vue'
import {ref, watch, nextTick} from "vue"
import axios from "axios";

const placeInputValue = ref("")
const searchKeywordActive = ref("")
const searchPlaceList = ref([])
const placeTypeNumber = ref(1)
const searchTypeName = ref('餐饮服务')
const placeList = ref([])
const isShowPlaceList = ref(true)
const isShowPanel = ref(false)
const areaTypeData = ref([
  {
    name: "美食",
    icon: 'Food',
    type: 1
  }
  , {
    name: "超市",
    icon: 'OfficeBuilding',
    type: 2
  },
  {
    name: "停车场",
    icon: 'Guide',
    type: 3
  }, {
    name: "卫生间",
    icon: 'School',
    type: 4
  }
])
const currentPage = ref(1)
const pageSize = ref(5)
const totalNear = ref(0)
const total = ref(0)
watch(() => [placeTypeNumber.value], (newVal, oldVal) => {

})
const siteSearch = () => {
  if (placeInputValue.value) {
    placeSearchBtn(1) //输入框不为空搜索地点信息
  }
}
const placeInputFocus = () => {
  setTimeout(() => {
    searchKeywordActive.value = '1'
  }, 300)
}
const placeInputBlur = () => {
  setTimeout(() => {
    searchKeywordActive.value = ''
  }, 300)
}
const state = reactive({
  gdKey: import.meta.env.VITE_GD_KEY,
  jscode: import.meta.env.VITE_GD_SECODE
})

async function placeInputChange() {
  const url = `https://restapi.amap.com/v3/assistant/inputtips?s=rsv3&key=${state.gdKey}&jscode=${state.jscode}&keywords=${placeInputValue.value}`
  const response = await axios.get(url)
  if (
    response.status == 200 &&
    response.data.tips &&
    response.data.tips.length > 0
  ) {
    const dataTips = response.data.tips
    searchPlaceList.value = []
    searchKeywordActive.value = '1'
    searchPlaceList.value = dataTips.filter(item => item.location?.length > 0)
  }
}

function itemNearPlace() {

}

async function placeSearchBtn(v) {
  if (v && v == 1) {
    currentPage.value = v
  }
  const url = `https://restapi.amap.com/v3/place/text?s=rsv3&key=${state.gdKey}&jscode=${state.jscode}&city=&page=${
    currentPage.value
  }&offset=${pageSize.value}&keywords=${placeInputValue.value}`
  const res = await axios.get(url)
  if (res.status === 200) {
    placeList.value = res.data.pois
    total.value = Number(res.data.count)
    isShowPanel.value = false
    isShowPlaceList.value = true
    nextTick(() => {
      document.querySelector('.bottomGdbox').scrollTop = 0
    })
  } else {
    ElMessage.warning("查询地点无效")
    placeList.value = []
  }
}

function choosePlaceType(index) {
  placeTypeNumber.value = index
  const typeNames = {
    1: '餐饮服务',
    2: '购物服务',
    3: '停车场',
    4: '公共设施',
  }
  searchTypeName.value = typeNames[index] || '未知类型';

}
</script>

<style scoped lang="scss">
.placeInput {
  top: 20px;
  right: 20px;
  width: 350px;

  :deep(.el-input) {
    --el-input-focus-border: #bc4227;
    --el-input-focus-border-color: #bc4227;
  }

  :deep(.el-collapse-item__content) {
    padding: 14px 16px 10px 16px;
    font-weight: bold;
    color: #000000;
  }

  :deep(.el-collapse-item__wrap) {
    margin-top: -8px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  :deep(.el-collapse-item__header) {
    cursor: default !important;
    padding: 6px 12px;
    background: #fff;
    border-radius: 10px;
  }

  :deep(.el-collapse-item__arrow) {
    display: none;
  }

  .search-list {
    .item-list {
      padding: 5px 0;
      margin-left: 5px;

      &:hover {
        background: #fafafa;
      }
    }
  }

}

.placeCard {
  :deep(.el-card__header) {
    padding: 12px;
  }

  :deep(.el-card__body) {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    > .el-pagination {
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .card-header {
    color: #000;
    @apply flex flex-justify-between  flex-items-center fw-bold;
  }

  .boxType {
    @apply w-60% flex  flex-items-center  flex-justify-between;
  }

  .placeInfo {
    border: 2px solid #dcdfe6;

    &:hover {
      background: #fbfbfb;
      border-color: #bc4227;
    }

    > div:first-child {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 70%;

      > div:first-child {
        font-weight: bold;
      }

      > div {
        margin: 5px 0 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      > div:not(:first-child) {
        color: gray;
        font-size: 14px;
      }

      > div:last-child {
        margin-bottom: 5px;
      }
    }

    > div:last-child {
      width: 30%;
      display: flex;
      align-items: center;
      overflow: hidden;
      max-height: 80px;

      img {
        width: 100%;
        height: auto;
      }
    }

  }

  .placeType {
    color: #000;

    > div:not(.centerlog) {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

      > div {
        margin-left: 3px;
      }
    }

    .centerlog {
      color: #d5d5d5;
    }

    .active {
      color: #bc4227;
    }
  }
}
</style>
